<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'

// 热门推荐页 标题和url
const hotMap = [
  { type: '1', title: '特惠推荐', url: '/hot/preference' },
  { type: '2', title: '爆款推荐', url: '/hot/inVogue' },
  { type: '3', title: '一站买全', url: '/hot/oneStop' },
  { type: '4', title: '新鲜好物', url: '/hot/new' }
]
// uniapp 获取页面参数
const props = defineProps<{
  type: string
}>()
// console.log(props) //获取type
//设置标题 从hotMap 数组中找到符合条件的数组元素
const currHot = hotMap.find((v) => v.type === props.type)
// console.log(currHot)//{type: "2", title: "爆款推荐", url: "/hot/inVogue"}
//动态设置标题
uni.setNavigationBarTitle({ title: currHot?.title })

import { getHotRecommendAPI } from '@/apis/hot'
import type { SubTypeItem } from '@/types/hot'
import { ref } from 'vue'
// 推荐封面图
const bannerPicture = ref('')
// 推荐选项
const subTypes = ref<SubTypeItem[]>([])
// 高亮下标
const activeIndex = ref(0)
const getHotRecommend = async () => {
  const res = await getHotRecommendAPI(currHot!.url, {
    page: 1,
    pageSize: 10
  })
  // console.log(res)
  // console.log(res.result.subTypes)
  //封面图
  bannerPicture.value = res.result.bannerPicture
  //推荐选项
  subTypes.value = res.result.subTypes
}

onLoad(() => {
  getHotRecommend()
})
// 已结束标记
const finish = ref(false)
// 设置了1分钟内不显示
const lastToastTime = ref(0) // 时间戳
const TOAST_DELAY = 0.2 * 60 * 1000 // 2分钟，单位为毫秒
const onScrolltolower = async () => {
  // console.log('触底了~')
  //获取当前选项------根据 activeIndex
  const currSubTypes = subTypes.value[activeIndex.value]
  // console.log(currSubTypes)
  // currSubTypes.goodsItems.page++//后续修改
  // 检查是否已经结束
  if (finish.value === true) {
    const currentTime = Date.now()
    // 检查是否在2分钟内
    if (currentTime - lastToastTime.value > TOAST_DELAY) {
      // 可以显示提示
      uni.showToast({
        icon: 'none',
        title: '没有更多数据~'
      })
      lastToastTime.value = currentTime // 更新最后提示时间
    }
    return // 直接返回，避免进一步处理
  }
  // 当前选项页码累加//后续修改---注释了一条
  if (currSubTypes.goodsItems.page < currSubTypes.goodsItems.pages) {
    currSubTypes.goodsItems.page++
  } else {
    // 标记已结束
    finish.value = true
    return
    // return uni.showToast({ icon: 'none', title: '没有更多数据~' })
  }
  const res = await getHotRecommendAPI(currHot!.url, {
    subType: currSubTypes.id,
    page: currSubTypes.goodsItems.page,
    pageSize: currSubTypes.goodsItems.pageSize
  })
  // console.log(res)//res全部数据
  const newSubTypes = res.result.subTypes[activeIndex.value]
  // console.log(newSubTypes) //获取下一页数据
  //当前选项数组追加
  currSubTypes.goodsItems.items.push(...newSubTypes.goodsItems.items)
}
</script>

<template>
  <view class="viewport">
    <!-- 推荐封面图 -->
    <view class="cover">
      <image :src="bannerPicture" class="image" mode="widthFix"></image>
    </view>
    <!-- 推荐选项 -->
    <view class="tabs">
      <text
        v-for="(item, i) in subTypes"
        :key="item.id"
        :class="{ active: activeIndex === i }"
        class="text"
        @tap="activeIndex = i"
        >{{ item.title }}</text
      >
      <!-- <text class="text">新品预告</text> -->
    </view>
    <!-- 推荐列表 -->
    <scroll-view
      scroll-y
      class="scroll-view"
      v-for="(item, i) in subTypes"
      :key="item.id"
      v-show="activeIndex === i"
      @scrolltolower="onScrolltolower"
    >
      <view class="goods">
        <navigator
          hover-class="none"
          class="navigator"
          v-for="goods in item.goodsItems.items"
          :key="goods.id"
          :url="`/pages/goods/goods?id=${goods.id}`"
        >
          <image class="thumb" :src="goods.picture"></image>
          <view class="name ellipsis">{{ goods.name }}</view>
          <view class="price">
            <text class="symbol">¥</text>
            <text class="number">{{ goods.price }}</text>
          </view>
        </navigator>
      </view>
      <view class="loading-text">
        {{ finish ? '没有更多数据~' : '正在加载...' }}
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}
.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 180rpx 0 0;
  position: relative;
}
.cover {
  width: 750rpx;
  height: 225rpx;
  border-radius: 0 0 40rpx 40rpx;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}
.cover .image {
  width: 750rpx;
}
.scroll-view {
  flex: 1;
  overflow: hidden;
}
.tabs {
  display: flex;
  justify-content: space-evenly;
  height: 100rpx;
  line-height: 90rpx;
  margin: 0 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #333;
  background-color: #fff;
  position: relative;
  z-index: 9;
}
.tabs .text {
  margin: 0 20rpx;
  position: relative;
}
.tabs .active::after {
  content: '';
  width: 40rpx;
  height: 4rpx;
  transform: translate(-50%);
  background-color: #27ba9b;
  position: absolute;
  left: 50%;
  bottom: 24rpx;
}
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx 20rpx;
}
.goods .navigator {
  width: 310rpx;
  padding: 20rpx;
  margin-top: 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
}
.goods .thumb {
  width: 305rpx;
  height: 305rpx;
}
.goods .name {
  height: 88rpx;
  font-size: 26rpx;
}
.goods .price {
  line-height: 1;
  color: #cf4444;
  font-size: 30rpx;
}
.goods .symbol {
  font-size: 70%;
}
.goods .decimal {
  font-size: 70%;
}
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0 50rpx;
}
</style>